<template>
  <div class="CouponList">
    <!--    <el-table-->
    <!--        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"-->
    <!--        type="index"-->
    <!--        style="width: 100%">-->
    <el-row>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="普通订单" name="first"></el-tab-pane>
        <el-tab-pane label="秒杀订单" name="second"></el-tab-pane>
      </el-tabs>
    </el-row>
    <el-table style="width: 100%;"
              :data="tableData"
              v-loading="loading"
    >
      <el-table-column type="index">
      </el-table-column>
      <el-table-column
          label="商品图片"
          prop="commodity.mImg">
        <template slot-scope="props">
          <el-image
              style="width: 100px; height: 100px"
              :src="props.row.commodity.mImg">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
          label="购买序号"
          prop="oSort">
      </el-table-column>
      <el-table-column
          label="用户昵称"
          prop="customer.cnickname">
      </el-table-column>
      <el-table-column
          label="用户手机号"
          prop="customer.cphone">
      </el-table-column>
      <el-table-column
          label="用户地址"
          prop="customer.caddress">
      </el-table-column>
      <el-table-column
          label="商品名称"
          prop="commodity.mName">
      </el-table-column>
      <el-table-column
          label="订单ID"
          prop="oid">
      </el-table-column>
      <el-table-column
          label="订单编号"
          prop="oNumber">
      </el-table-column>
<!--      <el-table-column-->
<!--          label="实际价格"-->
<!--          prop="oActual">-->
<!--      </el-table-column>-->
      <el-table-column
          label="实际支付"
          prop="oActual">
      </el-table-column>
      <el-table-column
          label="秒杀折扣">
        <template slot-scope="scope">
          <span v-if="scope.row.oSort < 0 || scope.row.oSort > 1000">
            原价
          </span>
          <span v-else-if="scope.row.oSort > 0 && scope.row.oSort <= 100">
             1折
          </span>
          <span v-else-if="scope.row.oSort > 100 && scope.row.oSort <= 500">
             5折
          </span>
          <span v-else-if="scope.row.oSort > 500 && scope.row.oSort <= 1000">
             8折
          </span>
          <span v-else>
             特殊商品
          </span>
        </template>
      </el-table-column>
      <el-table-column
          label="订单状态">
        <template slot-scope="scope">
          <span v-if="scope.row.oStatus === 1">
            待付款
          </span>
          <span v-else-if="scope.row.oStatus === 2">
            待发货
          </span>
          <span v-else-if="scope.row.oStatus === 3">
            待收货
          </span>
          <span v-else-if="scope.row.oStatus === 4">
            待评价
          </span>
          <span v-else-if="scope.row.oStatus === 5">
            退货
          </span>
          <span v-else-if="scope.row.oStatus === 6">
            退款
          </span>
          <span v-else-if="scope.row.oStatus === 7">
            退货退款
          </span>
          <span v-else>
            订单异常
          </span>
        </template>
      </el-table-column>
      <el-table-column
          label="创建时间"
          prop="oCreate">
      </el-table-column>
      <el-table-column
          align="right">
        <template slot-scope="scope">
          <!--          <el-button @click="drawer = true;handleEdit(scope.$index, scope.row)"
                               type="primary"
                               size="small"
                               style="margin-left: 16px;">
                      详情
                    </el-button>-->
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index,scope.row ,tableData)" style="margin-left: 16px;">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pagesize"
        layout="total, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <el-drawer
        title="订单详情"
        :visible.sync="drawer"
        :with-header="true">
      <el-form label-width="80px" :model="formLabelAlign" label-position="right">
        <el-form-item label="商品图片">
          <img :src="formLabelAlign.mimg" style="height: 230px;width: 230px">
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input :disabled="true" v-model="formLabelAlign.cnickname"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input :disabled="true" v-model="formLabelAlign.cphone"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input :disabled="true" v-model="formLabelAlign.caddress"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input :disabled="true" v-model="formLabelAlign.mname"></el-input>
        </el-form-item>

        <el-form-item label="订单类型">
          <el-input :disabled="true" v-model="formLabelAlign.rid"></el-input>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      ordinary_order: [],
      spike_order: [],
      loading: true,
      currentPage: 1, //初始页
      pagesize: 5,    //    每页的数据
      /*订单列表大概信息展示*/
      tableData: [{
        oid: '',
        oNumber: '',
        oActual: '',
        oTopay: '',
        oCreate: '',
      }],
      search: '',
      drawer: false,
      labelPosition: 'right',
      formLabelAlign: {
        mimg: '', //商品图片
        cnickname: '', // 用户昵称
        cphone: '', // 电话
        caddress: '', // 地址
        mname: '', // 商品名称
        rid: '' // 订单类型
      },
      activeName: 'first'
    }
  },
  mounted() {
    setTimeout(function () {
      this.loading = false;
    }, 3000);
    this.getTableData(0);
    this.tableData = this.ordinary_order;
  },
  methods: {
    handleClick(tab, event) {
      if (tab.label === "普通订单") {
        this.currentPage = 1;
        this.getTableData(0);
      }
      if (tab.label === "秒杀订单") {
        this.currentPage = 1;
        this.getTableData(1);
      }
    },

    getTableData(id) {
      let data = "sId=" + id + "&pageNum=" + this.currentPage + "&pageSize=" + this.pagesize;
      this.$http({
        url: 'xqf-order/rjbOrder/limitList?' + encodeURI(data),
      }).then(data => {
        this.loading = false;
        this.total = data.data.total;
        // this.tableData = data.data.list;
        let list = data.data.list;
        let lists = [];
        for (let i = 0; i < list.length; i++) {
          lists[i] = list[i];
          let phone = list[i].customer.cphone;
          if (phone != null) {
            let k = phone.substring(0, 3);
            let w = phone.substring(7, 11);
            let phones = k + " **** " + w;
            lists[i].customer.cphone = phones;
          }
        }
        this.tableData = lists;
      }).catch(error => {
        console.log(error);
      })
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      if (this.activeName === "first") {
        this.getTableData(0);
      }
      if (this.activeName === "second") {
        this.getTableData(1);
      }
    },
    handleEdit(index, row) {
      let mid = row.mId; // 商品信息
      let cid = row.cId; // 用户信息

      // 查询用户信息
      let curl = "rjbCustomer/selectOne?id=" + cid;
      this.$http(curl).then(data => {
        console.log(cid);
        this.formLabelAlign.cnickname = data.data.cnickname;
        this.formLabelAlign.caddress = data.data.caddress;
        let phone = data.data.cphone;
        let k = phone.substring(0, 3);
        let w = phone.substring(7, 11);
        let phones = k + " **** " + w;
        this.formLabelAlign.cphone = phones;
        this.formLabelAlign.rid = row.sId === 0 ? '普通订单' : '秒杀订单';
      }).catch(error => {
        console.log(error);
      });
      // 查询商品信息
      let murl = "rjbCommodity/selectOne?id=" + mid;
      this.$http(murl).then(data => {
        this.formLabelAlign.mimg = data.data.mImg;
        this.formLabelAlign.mname = data.data.mName;
      }).catch(error => {
        console.log(error);
      });
    },
    deleteOne(index, row, list) {
      this.$http("rjbOrder/deleteOne?id=" + row.oid).then(data => {
        if (data.data) {
          list.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        } else {
          this.open1();
        }
      }).catch(error => {
        console.log(error);
        this.open1();
      });
    },
    // 删除有问题，回调执行错误
    handleDelete(index, row, list) {
      //console.log(index, row);
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.deleteOne(index, row, list);
      }).catch(() => {
        this.open1();
      });
    },
    open1() {
      this.$message({
        type: 'error',
        message: '删除失败'
      });
    }
  }
}
</script>

<style scoped>
.CouponList {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.bg-purple {
  background: #409EFF;
}

.bg-purple-light {
  background: #FFFFFF;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  text-align: center;
}
</style>
